<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
</head>

<body>
<div class="demoTable">
    搜索名字：
    <div class="layui-inline">
        <input autocomplete="off" class="layui-input" id="demoReload" name="id">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <!--        <button class="layui-btn layui-btn-sm" lay-event="select"><i class="layui-icon"></i></button>-->
        <button class="layui-btn layui-btn-sm" style="background-color: red" lay-event="delete">
            删除
        </button>
        <!--        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon"></i></button>-->
    </div>
</script>


<script id="sexTpl" type="text/html">
    {{#  if(d.gender === '女'){ }}
    <span style="color: #F581B1;">{{ d.gender }}</span>
    {{#  } else { }}
    <span style="color: cornflowerblue;">{{ d.gender }}</span>
    {{#  } }}
</script>


<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test',
            id: 'demo',
            url: '/studentData/studentlist',
            data: true,
            page: true,
            toolbar: '#toolbarDemo',
            title: '用户数据表',
            loading: true,
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'id',
                    title: 'ID',
                    fixed: 'left',
                    unresize: true,
                    sort: true,
                    totalRowText: '合计'
                }, {
                    field: 'name',
                    title: '学生'
                }, {
                    field: 'gender',
                    title: '性别',
                    templet: '#sexTpl'
                }, {
                    field: 'classes',
                    title: '班级'
                }, {
                    field: 'score',
                    title: '成绩',
                    width: 150,
                    sort: true,
                    edit: 'text',
                    totalRow: true
                    , event: 'setScore'
                    , style: 'cursor: pointer;'
                    , templet: (data) => {
                        if (data.score >= 80 && data.score >= 60) {
                            return '<span style="color: green">' + data.score + '</span>'
                        } else {
                            return '<span style="color: red">' + data.score + '</span>'
                        }
                    }
                }, {
                    field: 'stuid',
                    title: '学号'
                }
                ]
            ],
            error: function () {
                //重定向到登录界面
                alert('出现错误，请重新登录之后再试');
                window.location.href = "/index.html"
            }

        });
        // 搜索  查询的数据能够返回  但是不知道怎么显示


        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus('demo');
            switch (obj.event) {
                case 'delete':
                    var data = checkStatus.data;
                    if (data.length > 0) {
                        layer.confirm('确认删除吗？', function (index) {
                            var params = "";
                            $.each(data, function (i, obj) {
                                params += "&ids=" + obj.id;
                                console.log(params)
                            })
                            $.ajax({
                                url: '/student/del',
                                data: params,
                                method: 'post',
                                success: function (result) {
                                    if (result.status) {
                                        table.reload('demo', {})//重新加载数据
                                    } else {
                                        alert(result.message)
                                    }
                                    layer.close(index)
                                },
                                complete: function (xhr) {
                                    if ("REDIRECT" === xhr.getResponseHeader("REDIRECT")) {
                                        alert("登陆时间过长，请重新登陆!");
                                        window.location.href = xhr.getResponseHeader("CONTENTPATH");
                                    }
                                }
                            })
                        })
                    }
                    break;
            }
        });


        //成绩编辑
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'setScore') {
                layer.prompt({
                    formType: 0
                    , title: '修改成绩为[' + data.id + '] 的成绩'
                    , value: Number(data.score)
                }, function (value, index) {
                    var a = Number(obj.data.id);
                    var id = a;
                    var score = Number(value);
                    // 这里一般是发送修改的Ajax请求
                    $.ajax({
                        url: '/student/update',
                        data: {id, score},
                        method: 'PUT',
                        success: function (result) {
                            if (result.status) {
                                layer.open({
                                    title: '修改分数',
                                    content: '修改' + data.name + '的成绩为' + score,
                                    btn: ['确定'],
                                    area: ['300px', '200px'],
                                    fixed: true
                                })
                                layer.close(index)
                                //同步更新表格和缓存对应的值
                                table.reload('demo', {})
                                // table.load('test',{})
                            } else {
                                layer.open({
                                    title: '修改分数',
                                    content: '修改' + data.name + '的成绩失败;修改分数:' + score,
                                    btn: ['确定'],
                                    area: ['300px', '200px'],
                                    fixed: true
                                })
                            }
                        },
                        complete: function (xhr) {
                            if ("REDIRECT" === xhr.getResponseHeader("REDIRECT")) {
                                alert("登陆时间过长，请重新登陆!");
                                window.location.href = xhr.getResponseHeader("CONTENTPATH");
                            }
                        }
                    })
                });
            }
        });
    });
    $('button').eq(0).click(() => {
        const name = String(document.getElementById("demoReload").value);
        console.log(name)
        // 搜素
        layui.use('table', () => {
            let table = layui.table;
            table.render({
                elem: '#test'
                , url: '/student/name'
                , where: {name}
                , display: null
                , cols: [[{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'id',
                    title: 'ID',
                    fixed: 'left',
                    unresize: true,
                    sort: true,
                    totalRowText: '合计'
                }, {
                    field: 'name',
                    title: '学生'
                }, {
                    field: 'gender',
                    title: '性别',
                    templet: '#sexTpl'
                }, {
                    field: 'classes',
                    title: '班级'
                }, {
                    field: 'score',
                    title: '成绩',
                    width: 150,
                    sort: true,
                    edit: 'text',
                    totalRow: true
                    , event: 'setScore'
                    , style: 'cursor: pointer;'
                    , templet: (data) => {
                        if (data.score >= 80 && data.score >= 60) {
                            return '<span style="color: green">' + data.score + '</span>'
                        } else {
                            return '<span style="color: red">' + data.score + '</span>'
                        }
                    }
                }
                ]]
            });
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'setScore') {
                    layer.prompt({
                        formType: 0
                        , title: '修改成绩为[' + data.id + '] 的成绩'
                        , value: Number(data.score)
                    }, function (value, index) {
                        var a = Number(obj.data.id);
                        var id = a;
                        var score = Number(value);
                        // 这里一般是发送修改的Ajax请求
                        $.ajax({
                            url: '/student/update',
                            data: {id, score},
                            method: 'PUT',
                            success: function (result) {
                                if (result.status) {
                                    layer.open({
                                        title: '修改分数',
                                        content: '修改' + data.name + '的成绩为' + score,
                                        btn: ['确定'],
                                        area: ['300px', '200px'],
                                        fixed: true
                                    })
                                    layer.close(index)
                                    //同步更新表格和缓存对应的值
                                    table.reload('demo', {})
                                    // table.load('test',{})
                                } else {
                                    layer.open({
                                        title: '修改分数',
                                        content: '修改' + data.name + '的成绩失败;修改分数:' + score,
                                        btn: ['确定'],
                                        area: ['300px', '200px'],
                                        fixed: true
                                    })
                                }
                            }
                        })
                    });
                }
            });
        });
    });
</script>

</body>

</html>